<template>
  <div class="cont">
    <!--  头部 -->
    <el-card class="header">
      <div slot="header">
        <!-- @tab-click="handleClick": 切换时的事件 -->
        <el-tabs v-model="activeName" class="tab">
          <el-tab-pane label="销售额" name="sale"></el-tab-pane>
          <el-tab-pane label="访问量" name="visitor"></el-tab-pane>
        </el-tabs>
      </div>

      <!-- v-model="value2" :picker-options="pickerOptions"-->
      <!-- 日期 -->
      <div class="block">
        <div class="dateHandler" @click="dateHandler" ref="date">
          <span @click="setDay">今日</span>
          <span @click="setWeek">本周</span>
          <span @click="setMonth">本月</span>
          <span @click="setYear">本年</span>
        </div>
        <!-- 
          type="daterange": 显示类型
          value-format: 定义格式
          v-model： 收集数据
        -->
        <el-date-picker
          v-model="date"
          value-format='yyyy-MM-dd'
          style="width:250px;"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          size="mini"
        ></el-date-picker>
      </div>
    </el-card>

    <!-- 内容部分 -->
    <div class="sale_cont">
      <el-row :gutter="10">
        <el-col :span="18">
          <div class="echarts" ref="echarts"></div>
        </el-col>
        <el-col :span="6">
          <h3>门店{{title}}排名</h3>
          <ul>
            <li>
              <span class="rValue">1</span>
              <span>肯德基</span>
              <span>323,234</span>
            </li>
            <li>
              <span class="rValue">2</span>
              <span>麦当劳</span>
              <span>268,334</span>
            </li>
            <li>
              <span class="rValue">3</span>
              <span>海底捞</span>
              <span>266,144</span>
            </li>
            <li>
              <span>3</span>
              <span>海底捞</span>
              <span>266,144</span>
            </li>
            <li>
              <span>3</span>
              <span>海底捞</span>
              <span>266,144</span>
            </li>
            <li>
              <span>3</span>
              <span>海底捞</span>
              <span>266,144</span>
            </li>
             <li>
              <span>3</span>
              <span>海底捞</span>
              <span>266,144</span>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>

    <!-- 底部内容 -->
    
  </div>
</template>

<script>
import * as Echarts from "echarts";
import dayjs from 'dayjs';
import {mapState} from 'vuex';
export default {
  name: "Cont",
  data() {
    return {
      activeName: "sale",
      myCharts: null,
      // 收集日期
      date: []
    };
  },
  mounted() {
    // 初始化 echarts
    this.myCharts = Echarts.init(this.$refs.echarts);
    // 配置 echarts
    this.myCharts.setOption({
      // 鼠标移上显示提示信息
      tooltip:{
        show:true
      },
      title: {
        text: "销售额趋势",
        top: 10,
        left: 20
      },
      xAxis: {
        type: "category",
        data: [],
        // data: [
        //   "一月",
        //   "二月",
        //   "三月",
        //   "四月",
        //   "五月",
        //   "六月",
        //   "七月",
        //   "八月",
        //   "九月",
        //   "十月",
        //   "十一月",
        //   "十二月"
        // ]
      },

      yAxis: {
        type: "value"
      },
      series: [
        {
          data: [],
          // data: [120, 200, 150, 80, 70, 110, 130, 112, 56, 88, 102, 210],
          type: "bar",
          barWidth:'50%',
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)"
          }
        }
      ]
    });
    // 刚挂载时 是没有数据的 因此监听 listState, 当listState发生变化时（也就是vuex数据过来是） 自动挂载数据
  },
  methods: {
    // 本天
    setDay(){
      let day = dayjs().format('YYYY-MM-DD')
      this.date = [day,day]
    },
    // 本周
    setWeek(){
      let start = dayjs().day(1).format('YYYY-MM-DD')
      let end = dayjs().day(7).format('YYYY-MM-DD')
      this.date = [start,end]
    },
    // 本月
    setMonth(){
      let start = dayjs().startOf('month').format('YYYY-MM-DD')
      let end = dayjs().endOf('month').format('YYYY-MM-DD')
      this.date = [start,end]
    },
    // 本年
    setYear(){
      const start = dayjs().startOf('year').format('YYYY-MM-DD')
      const end = dayjs().endOf('year').format('YYYY-MM-DD')
      // console.log(start,end)
      this.date = [start,end]
    },
    // 事件委派 (排他)
    dateHandler(e){
      this.$refs.date.children.forEach(item => {
        item.style.color = ''
      })
      e.target.style.color = 'red'
    }
  },
  computed:{
    title(){
      return this.activeName === 'sale' ? '销售额': '访问量'
    },
    // 获取 mock 中的数据
    ...mapState({
      listState: state => {
        return state.home.echartsData
      }
    })
  },
  watch:{
    // 监听 table 切换
    title(){
      // 监听计算属性中的 title 重新修改 echart 里面的值
      // 注：如果有新的值 则用新的， 反之 还是用旧的
      this.myCharts.setOption({
        title:{
          text: this.activeName === "sale"? '销售额趋势' : '访问量'
        },
        xAxis:{
          // 使用 mock 中的数据展示
          data: this.activeName==="sale"? this.listState.orderFullYearAxis : this.listState.userFullYearAxis
        },
        series:[
          {
            data: this.activeName === "sale" ? this.listState.orderFullYear : this.listState.userFullYear,
            type: "bar",
            barWidth:'50%',
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)"
            }
          }
        ]
      })
    },
    // 监听 vuex 数据是否过来 重新设置 ehcart 数据
    listState(){
      this.myCharts.setOption({
      // 鼠标移上显示提示信息
      tooltip:{
        show:true
      },
      title: {
        text: "销售额趋势",
        top: 10,
        left: 20
      },
      xAxis: {
        type: "category",
        data: this.listState.orderFullYearAxis
      },

      yAxis: {
        type: "value"
      },
      series: [
        {
          data: this.listState.orderFullYear,
          type: "bar",
          barWidth:'50%',
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)"
          }
        }
      ]
    });
    }
  }
};
</script>

<style lang="less" scoped>
.dateHandler{
  display: inline-block;
}
.cont {
  width: 100%;
  .header {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .tab {
      width: 1000%;
    }
  }
  .block {
    margin-top: 10px;
    span {
      position: relative;
      z-index: 999;
      margin: 0 10px;
      font-size: 14px;
    }
  }
  // 内容部分
  .sale_cont {
    // border: 1px solid red;
    height: 260px;
    margin: 10px 0;
    .echarts {
      width: 105%;
      height: 300px;
    }
    ul {
      height: 300px;
      margin: 0;
      padding: 0;
      list-style: none;
      li {
        // height: 12%;
        font-size: 14px;
        margin-bottom: 10px;
        .rValue {
          display: inline-block;
          width: 20px;
          height: 20px;
          background: red;
          border-radius: 50%;
          text-align: center;
          line-height: 20px;
          margin-right: 10px;
        }
        span:nth-child(1) {
          margin-right: 10px;
        }
        span:nth-child(2) {
          margin-right: 100px;
        }
        span:nth-child(3) {
          color: #666;
        }
      }
    }
  }
}
</style>